<template>
  <div>
    <storeDiyForm :title="diyItem.name" :hide="['other']">
      <template #content>
        <storeDiyFormItem label="布局方式">
          <storeDiyFormSelectBtn
            :icon="true"
            v-model="diyItem.layout.value"
            :data="layoutData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <div class="window-layout-box text-grey">
          <div
            class="window-layout-list window-layout-1"
            v-if="diyItem.layout.value == 1"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度50%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图二
                <br />
                宽度50%
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-2"
            v-if="diyItem.layout.value == 2"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度33.33%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图二
                <br />
                宽度33.33%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图三
                <br />
                宽度33.33%
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-3"
            v-if="diyItem.layout.value == 3"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度25%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图二
                <br />
                宽度25%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图三
                <br />
                宽度25%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图四
                <br />
                宽度25%
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-4"
            v-if="diyItem.layout.value == 4"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度50%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图二
                <br />
                宽度50%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图三
                <br />
                宽度50%
              </div>
            </div>
            <div>
              <div class="window-layout-item-text">
                图四
                <br />
                宽度50%
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-5"
            v-if="diyItem.layout.value == 5"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度50% * 高度100%
              </div>
            </div>
            <div>
              <div>
                <div class="window-layout-item-text">
                  图二
                  <br />
                  宽度50% * 高度50%
                </div>
              </div>
              <div>
                <div class="window-layout-item-text">
                  图三
                  <br />
                  宽度50% * 高度50%
                </div>
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-6"
            v-if="diyItem.layout.value == 6"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度50% * 高度100%
              </div>
            </div>
            <div>
              <div>
                <div class="window-layout-item-text">
                  图二
                  <br />
                  宽度50% * 高度50%
                </div>
              </div>
              <div>
                <div>
                  <div class="window-layout-item-text">
                    图三
                    <br />
                    宽度25% * 高度25%
                  </div>
                </div>
                <div>
                  <div class="window-layout-item-text">
                    图四
                    <br />
                    宽度25% * 高度25%
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="window-layout-list window-layout-7"
            v-if="diyItem.layout.value == 7"
          >
            <div>
              <div class="window-layout-item-text">
                图一
                <br />
                宽度50% * 高度100%
              </div>
            </div>
            <div>
              <div>
                <div class="window-layout-item-text">
                  图二
                  <br />
                  宽度50% * 高度50%
                </div>
              </div>
              <div>
                <div class="window-layout-item-text">
                  图三
                  <br />
                  宽度25% * 高度25%
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="mt20">
          <draggable v-model="diyItem.data" item-key="index">
            <template #item="{ element, index }">
              <template
                v-if="
                  (diyItem.layout.value == 1 && index < 2) ||
                  (diyItem.layout.value == 2 && index < 3) ||
                  (diyItem.layout.value == 3 && index < 4) ||
                  (diyItem.layout.value == 4 && index < 4) ||
                  (diyItem.layout.value == 5 && index < 3) ||
                  (diyItem.layout.value == 6 && index < 4) ||
                  (diyItem.layout.value == 7 && index < 3)
                "
              >
                <storeDiyFormItems>
                  <storeDiyFormItem label="图片" :hideAfter="true">
                    <storeDiyFormImageBtn v-model="element.img">
                    </storeDiyFormImageBtn>
                  </storeDiyFormItem>
                  <storeDiyFormItem
                    label="跳转链接"
                    :hideAfter="true"
                    :marginBotton="false"
                  >
                    <storeDiyFormLinkBtn
                      text="选择跳转到的页面"
                      v-model="element.link"
                    >
                    </storeDiyFormLinkBtn>
                  </storeDiyFormItem>
                </storeDiyFormItems>
              </template>
            </template>
          </draggable>
        </div>
      </template>
      <template #style>
        <storeDiyFormItem label="图片间隙">
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.img_gap }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.img_gap"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="图片投影样式">
          <storeDiyFormSelectBtn
            v-model="diyItem.style.img_shade"
            :data="imgShasdeData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="图片倒角">
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.img_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.img_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景状态">
          <storeDiyFormSelectBtn
            v-model="diyItem.style.bg_status"
            :data="bgStatusData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景颜色" v-if="diyItem.style.bg_status == 1">
          <storeDiyFormColorBtn v-model="diyItem.style.bg" />
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景上圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.t_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.t_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景下圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.b_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.b_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景投影样式"
          v-if="diyItem.style.bg_status == 1"
        >
          <storeDiyFormSelectBtn
            v-model="diyItem.style.shade"
            :data="imgShasdeData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>

        <el-divider content-position="left">
          <div class="fw">边距</div>
        </el-divider>

        <storeDiyFormItem label="外左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.ml }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.ml"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="外右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pl }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pl"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
      </template>
    </storeDiyForm>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  name: "storeDiyEditorWindow",
  components: {
    draggable,
  },
});
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import storeDiyForm from "../form/index.vue";
import storeDiyFormItem from "../form/item.vue";
import storeDiyFormItems from "../form/items.vue";
import storeDiyFormSelectBtn from "../form/select-btn.vue";
import storeDiyFormImageBtn from "../form/image-btn.vue";
import storeDiyFormLinkBtn from "../form/link-btn.vue";
import storeDiyFormCreateBtn from "../form/create-btn.vue";
import storeDiyFormDeleteBtn from "../form/delete-btn.vue";
import storeDiyFormColorBtn from "../form/color-btn.vue";
import { diySelectDataType, diyWindowDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyWindowDataType;
  }>(),
  {
    diyItem: () => {
      return {
        layout:{
          value:1
        },
        style: {
          img_gap: 0,
          img_shade: 0,
          img_radius: 0,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
      };
    },
  }
);

const layoutData = ref<Array<diySelectDataType>>([
  {
    title: "icon-layout-1",
    value: 1,
  },
  {
    title: "icon-layout-2",
    value: 2,
  },
  {
    title: "icon-layout-3",
    value: 3,
  },
  {
    title: "icon-layout-4",
    value: 4,
  },
  {
    title: "icon-layout-5",
    value: 5,
  },
  {
    title: "icon-layout-6",
    value: 6,
  },
  {
    title: "icon-layout-7",
    value: 7,
  },
]);

const imgShasdeData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "投影",
    value: 1,
  },
]);

const bgStatusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);
</script>

<style scoped>
/*魔方*/
.window-layout-box {
}
.window-layout-box .window-layout-list {
  display: flex;
  font-size: 12px;
}
.window-layout-box .window-layout-list > div {
  align-items: center;
  text-align: center;
  display: flex;
}
.window-layout-item-text {
  width: 100%;
}
.window-layout-box .window-layout-list.window-layout-1 > div {
  width: 50%;
  height: 140px;
  border-left: 1px solid var(--el-border-color);
  border-top: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-1 > div:last-child {
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-2 > div {
  width: 33.33%;
  height: 100px;
  border-left: 1px solid var(--el-border-color);
  border-top: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-2 > div:last-child {
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-3 > div {
  border-left: 1px solid var(--el-border-color);
  border-top: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
  width: 25%;
  height: 80px;
}
.window-layout-box .window-layout-list.window-layout-3 > div:last-child {
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-4 {
  flex-wrap: wrap;
}
.window-layout-box .window-layout-list.window-layout-4 > div {
  width: calc(50% - 2px);
  height: 140px;
  border-left: 1px solid var(--el-border-color);
  border-top: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-4 > div:nth-child(2) {
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-4 > div:nth-child(3) {
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-4 > div:nth-child(4) {
  border-bottom: 1px solid var(--el-border-color);
  border-right: 1px solid var(--el-border-color);
}

.window-layout-box .window-layout-list.window-layout-5 > div {
  width: 50%;
  height: 240px;
  border-top: 1px solid var(--el-border-color);
  border-left: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-5 > div:nth-child(2) {
  display: block;
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box
  .window-layout-list.window-layout-5
  > div:nth-child(2)
  > div {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  flex: 1;
}
.window-layout-box
  .window-layout-list.window-layout-5
  > div:nth-child(2)
  > div:nth-child(2) {
  border-top: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-6 > div {
  width: 50%;
  height: 240px;
  border-top: 1px solid var(--el-border-color);
  border-left: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-6 > div:nth-child(2) {
  display: block;
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box
  .window-layout-list.window-layout-6
  > div:nth-child(2)
  > div {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  flex: 1;
}
.window-layout-box
  .window-layout-list.window-layout-6
  > div:nth-child(2)
  > div:nth-child(2) {
  border-top: 1px solid var(--el-border-color);
}
.window-layout-box
  .window-layout-list.window-layout-6
  > div:nth-child(2)
  > div:nth-child(2)
  > div {
  height: 120px;
  display: flex;
  align-items: center;
}
.window-layout-box
  .window-layout-list.window-layout-6
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(2) {
  border-left: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-7 {
  display: block;
}
.window-layout-box .window-layout-list.window-layout-7 > div {
  width: 100%;
  height: 120px;
  border-top: 1px solid var(--el-border-color);
  border-left: 1px solid var(--el-border-color);
  border-right: 1px solid var(--el-border-color);
}
.window-layout-box .window-layout-list.window-layout-7 > div:nth-child(2) {
  border-right: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}
.window-layout-box
  .window-layout-list.window-layout-7
  > div:nth-child(2)
  > div {
  width: 50%;
  height: 120px;
  display: flex;
  align-items: center;
}
.window-layout-box
  .window-layout-list.window-layout-7
  > div:nth-child(2)
  > div:nth-child(2) {
  border-left: 1px solid var(--el-border-color);
}
</style>